<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-折线图制作</title>
    <!-- 1.引入刚刚下载的 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
</head>

<body>
    <!-- 2.为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        //3.创建echarts 实例并渲染
        // 3.1 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.querySelector('#main'));
        // 3.2指定图表的配置项和数据(设置图标样式)
        const option = {
  tooltip: {
  },
  title:
    {
    text: '班级每组薪资',
    left: '20',
    textStyle: {
      color: '#333',
      fontWeight: 700,
      fontSize: 18
    },
    },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['小黄', '小红', '小花', '小白', '小灰', '小分', '小周', '小王', '小李', '小张']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(15, 210, 153)'
          },
          {
            offset: 1,
            color: 'rgb(255, 255, 255)'
          }
        ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(3, 164, 241)'
          },
          {
            offset: 1,
            color: 'rgb(255, 255, 255)'
          }
        ]),],
  series: [
    {
      name: '期望薪资',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [11000,12000, 9500, 10000, 13000, 12500, 14200,9000,14000,13000]
    },
    {
      name: '实际薪资',
      type: 'bar',
      data: [13000, 11000, 12400, 15000, 12000, 16000, 17700,10000,10500,11000],
      emphasis: {
        focus: 'series'
      },
      markLine: {
        lineStyle: {
          type: 'dashed'
        },
      }
    },
  ]
};
        // 3.3使用刚指定的配置项和数据显示图表。(渲染图表样式)
        myChart.setOption(option);
    </script>
</body>

</html>